<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css" />
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<form action="qx/insertRoleUser" id="editRoleEmpForm" method="post">
    <input type="hidden" name="roid" value="${selectRoleUser.oid}">
    <input type="hidden" name="eids" id="eids">
</form>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑 [ ${selectRoleUser.roleName} ] 角色下用户</h4>
    </div>

    <div class="panel-body">
        <form action="" id="myform" method="post" class="form-horizontal" role="form">
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="dept" class="col-md-4 control-label">所属部门</label>
                    <div class="col-md-8">
                        <select name="dept" class="form-control" id="dept">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="job" class="col-md-4 control-label">所属职位</label>
                    <div class="col-md-8">
                        <select name="job" class="form-control" id="job">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="leftemp" class="col-md-4 control-label">员工信息</label>
                    <div class="col-md-8">
                        <select name="leftemp" multiple="multiple" class="form-control"
                                id="leftemp" size="15">
                            <option value="" disabled="disabled">------未选择------</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <div class="col-md-4" align="center">
                        <div class="row">
                            <BR><BR><BR>
                            <button type="button" id="rightAll" class="btn btn-info btn-block">
                                <i class="glyphicon glyphicon-forward"></i>
                            </button>
                            <button type="button" id="rightSelected" class="btn btn-info btn-block">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </button>
                            <button type="button" id="leftSelected" class="btn btn-info btn-block">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </button>
                            <button type="button" id="leftAll" class="btn btn-info btn-block">
                                <i class="glyphicon glyphicon-backward"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <select name="emp" multiple="multiple" class="form-control"
                                id="emp" size="15">
                            <option value="" disabled="disabled">------已选择------</option>
                            <c:forEach items="${selectRoleUser.employees}" var="emps">
                                <option value="${emps.oid}">${emps.empName}</option>
                            </c:forEach>
                            <%--<option value="2">张三</option>
                            <option value="1">超级管理员</option>--%>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="col-md-10  col-md-offset-2">
                        <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                        <button type="button" id="editRoleEmpBtn" class="btn btn-success">提交信息</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $.getJSON("dept/listDeptUseSelect", function (listdept) {
            var dept = $("#dept")[0];
            dept.options.length = 1;
            for (var i = 0; i < listdept.length; i++) {
                var d = listdept[i];
                dept.options.add(new Option(d.deptName, d.oid));
            }
        });

        $("#dept").change(function () {
            $("#job")[0].options.length = 1;
            $("#leftemp")[0].options.length = 1;
            if (this.value == "") {
                return;
            }
            $.getJSON("dept/listDeptJobUseSelect", {
                deptid: this.value
            }, function (listjob) {
                var job = $("#job")[0];
                job.options.length = 1;
                for (var i = 0; i < listjob.length; i++) {
                    var job1 = listjob[i];
                    job.options.add(new Option(job1.name, job1.oid));
                }
            });

            $.getJSON("dept/listEmpUseSelete", {
                deptid: $("#dept").val()
            }, function (emps) {
                var emp = $("#leftemp")[0];
                emp.options.length = 1;
                for (var i = 0; i < emps.length; i++) {
                    var e = emps[i];
                    emp.options.add(new Option(e.empName, e.oid));
                }
            });
        });

        $("#job").change(function () {
            $.getJSON("dept/listEmpUseSelete", {
                deptid: $("#dept").val(),
                jobid: this.value
            }, function (emps) {
                var emp = $("#leftemp")[0];
                emp.options.length = 1;
                for (var i = 0; i < emps.length; i++) {
                    var e = emps[i];
                    emp.options.add(new Option(e.empName, e.oid));
                }
            });
        });

        $("#rightAll").click(function () {
            var count = $("#leftemp option").length;
            for (var i = 1; i < count; i++) {
                var option = $("#leftemp option")[1];
                if ($("#emp option[value=" + option.value + "]").length == 0) {
                    $("#emp")[0].options.add(new Option($(option).text(), $(option).val()));
                }
                $(option).remove();
            }
        });

        $("#rightSelected").click(function () {
            var count = $("#leftemp option:selected").length;
            for (var i = 0; i < count; i++) {
                var option = $("#leftemp option:selected")[0];
                if ($("#emp option[value=" + option.value + "]").length == 0) {
                    $("#emp")[0].options.add(new Option($(option).text(), $(option).val()));
                }
                $(option).remove();
            }
        });

        $("#leftAll").click(function () {
            var count = $("#emp option").length;
            for (var i = 1; i < count; i++) {
                var option = $("#emp option")[1];
                if ($("#leftemp option[value=" + option.value + "]").length == 0) {
                    $("#leftemp")[0].options.add(new Option($(option).text(), $(option).val()));
                }
                $(option).remove();
            }
        });

        $("#leftSelected").click(function () {
            var count = $("#emp option:selected").length;
            for (var i = 0; i < count; i++) {
                var option = $("#emp option:selected")[0];
                if ($("#leftemp option[value=" + option.value + "]").length == 0) {
                    $("#leftemp")[0].options.add(new Option($(option).text(), $(option).val()));
                }
                $(option).remove();
            }
        });

        $("#editRoleEmpBtn").click(function(){
            var eid = $("#emp option");
            var eids = "";
            if (eid.length>1) {
                $("#emp option").each(function(index) {
                    if(index==0){
                        return;
                    }
                    eids += $(this).val()+':';
                });
                eids=eids.slice(0,-1);
            }
            $("#eids").val(eids);
            $("#editRoleEmpForm").submit();
        });

    })

</script>

</body>
</html>
